<template>
<div class="index" @scroll="handleScroll()">
  <!-- 弹窗 -->
  <div class="tc" v-if="showModul">
    <div class="tc-item">
      <img src="http://sucai.suoluomei.cn/sucai_zs/images/close.png?x-oss-process=image/quality,Q_70" @click="closeIcon" alt="" class="close-icon">
      <div class="bq-icon">
        <img src="http://sucai.suoluomei.cn/sucai_zs/images/eyes.png?x-oss-process=image/quality,Q_70" alt=""  class="">
      </div>
      <div class="tc-item-con">哦噢~你还未报名<br>你有报名资格</div>
      <div class="tc-item-btn">
        <button @click="LinkTo('/sign')">前往报名</button>
      </div>
    </div>
  </div>
  <div class="share" @click="share"></div>
  <!-- 活动规则 -->
  <div class="hdgz" @click="gzClick">
    <img src="http://sucai.suoluomei.cn/sucai_zs/images/gz.png?x-oss-process=image/quality,Q_70" onclick="return false" alt="">
  </div>
  <div class="gz" v-if="gz">
    <img src="http://sucai.suoluomei.cn/sucai_zs/images/closes.png?x-oss-process=image/quality,Q_70" @click="closeIcon" alt="" class="close-icon">
    <img src="../assets/acitvity_rule.png" onclick="return false" alt="">
  </div>
  <!-- 点击报名 -->
  <div class="djbm" @click="LinkTo('/sign')"></div>
  <!-- 导航图 -->
  <div class="banner">
    <img src="http://sucai.suoluomei.cn/sucai_zs/images/banner.png?x-oss-process=image/quality,Q_70" onclick="return false" alt="">
  </div>
  <!-- 导航列 -->
  <div class="searchBar" id="searchBar">
    <div :class="fixedTop?'fixedTopRight':'fixedTopErro'">
      <div class="navbar" @scroll="ScrollTop()">
        <div class="navbar-item">
          <h2><font>{{navbars.candidates_total ? navbars.candidates_total : 0}}</font>人</h2>
          <h4>已报名</h4>
        </div>
        <div class="navbar-item">
          <h2><font>{{navbars.vote_total || 0}}</font>人</h2>
          <h4>投票人次</h4>
        </div>
        <div class="navbar-item">
          <h2><font>{{navbars.log || 0}}</font>人</h2>
          <h4>访问量</h4>
        </div>
      </div>
      <!-- 搜索 -->
      <div class="search">
        <div class="search-item">
          <input type="text" name="" placeholder="请输入名字或编号"  @keyup.enter="whatchInput" ref='inputValue'>
        </div>
      </div>
    </div>
  </div>
  <!-- 内容区 -->
  <div class="content">
    <mu-container>
      <mu-tabs :value.sync="active1" inverse color="secondary" text-color="rgba(0, 0, 0, .54)"  center>
        <mu-tab @click="zx">最新参赛</mu-tab>
        <!-- <mu-tab @click="pm">投票排名</mu-tab> -->
      </mu-tabs>
      <!-- 最新参赛 -->
      <div class="demo-text" v-if="active1 === 0">
        <div class="demo-contant">
          <div class="demo-contant-item" v-for="entry in entrys" :key='entry.index'  >
            <div class="division"><div class="selectUnf"><img src="http://sucai.suoluomei.cn/sucai_zs/images/jiao.png?x-oss-process=image/quality,Q_70" alt=""></div><p>{{entry.division_name}}</p></div>
            <img :src="entry.after_image || null" alt="" @click="LinkTo('/personal',entry.id)">
            <div class="demo-item-title">
              <div class="item-title-num">
                <font>{{entry.id || null}}</font>
              </div>
              <div class="item-title-name">
                {{entry.name || null}}
              </div>
              <div class="item-title-ticket">
                <font>{{entry.vote_num || null}}</font>票
              </div>
            </div>
          </div>
          <!-- <div class="page">
            <div class="page-left" @click="leftPageNew">
              <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/previous.png" v-if="isClickNew" alt="">
              <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/previous-disable.png" v-else alt="">
            </div>
            <div class="page-num">
              {{pageNumNew}}
            </div>
            <div class="page-right" @click="rightPageNew">
              <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/next-disable.png" v-if="isClickNew" alt="">
              <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/next.png" v-else  alt="">
            </div>
          </div> -->
        </div>
      </div>
      <!-- 投票排名 -->
      <!-- <div class="demo-text" v-if="active1 === 1">
        <div class="demo-contant">
          <div class="demo-contant-item" v-for="entry2 in entry2s" :key='entry2.index'>
            <img :src="entry2.after_image" alt="" @click="LinkTo('/personal',entry.id)">
            <div class="demo-item-title">
              <div class="item-title-num">
                <font>{{entry2.id}}</font>
              </div>
              <div class="item-title-name">
                {{entry2.name}}
              </div>
              <div class="item-title-ticket">
                <font>{{entry2.vote_num}}</font>票
              </div>
            </div>
            <div class="item-bottom-btn">
              <button class="item-bottom-btn-select" @click="LinkTo('/personal',entry2.id)">参与投票</button>
            </div>
          </div>
          <div class="page" id="#a">
            <div class="page-left" @click="leftPage">
              <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/previous.png" v-if="isClick" alt="">
              <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/previous-disable.png" v-else alt="">
            </div>
            <div class="page-num">
              {{pageNum}}
            </div>
            <div class="page-right" @click="rightPage">
              <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/next-disable.png" v-if="isClick" alt="">
              <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/next.png" v-else  alt="">
            </div>
          </div>
        </div>
      </div> -->
    </mu-container>
  </div>
  <!-- 加载更多 -->
  <div class="load-more" v-if="loadMore">
    <mu-circular-progress class="demo-circular-progress" color="secondary" :size="20"></mu-circular-progress>
    <div class="more-font">正在加载</div>
  </div>
  <!-- 加载更多 -->
  <div class="load-more" v-if="NoMore">
    <div class="more-font">——— 到底啦 ———</div>
  </div>
  <!-- 底部导航 -->
  <bottomBar :toSelected='proValue'></bottomBar>
  <mu-dialog title="提示" width="360" :open.sync="openSimple">
      {{contant}}
      <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">关闭</mu-button>
    </mu-dialog>
</div>
</template>

<script>
// import VConsole from "vconsole/dist/vconsole.min.js"
// new VConsole();
import bottomBar from "../components/bottomBar.vue";
import http from "../utils/http";
import { setTimeout } from 'timers';
export default {
  name: "index",
  data() {
    return {
      navbars: [],
      active1: 0,
      entrys: [],
      entry2s: [],
      isClick: false,
      isClickNew: false,
      proValue: "home",
      id: "",
      searchValue: "",
      openSimple: false,
      contant: "",
      AllPage: 2,
      louterType: 1,
      gz: false,
      showModul: false,
      text: "List",
      loadMore: false,
      NoMore: false,
      pageNum: 1,
      pageNumNew: 1,
      fixedTop: false
    };
  },
  created() {
    let that = this;
    // navbar数据
    // 初始化第一页的数据
    var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // var res2 = str.substring(start2, end);
    // console.log('res',res)
    http
      .post("Zmhf/index", {
        data: {
          sorttype: 1
        },
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectAllBeautifulGrain"
      })
      .then(function(response) {
        // 如果没有报名则跳转
        // if (response.is_sign == 0) {
        //   that.$router.push({
        //     path: '/sign'
        //   });
        // }
        // console.log("response", response);
          // console.log("!localStorage.getItem('flagSign')",!localStorage.getItem('flagSign'))
        if (response.is_sign == 0) {
          if (!localStorage.getItem('flagSign')) {
            that.showModul = true;
          }
          if (!localStorage.getItem('flagSign')) {
            localStorage.setItem('flagSign', 1)
          }
        }
        if (response.current_type == 2) {
          that.$router.push({
            path: "/personal"
          });
        }
        that.navbars = response.data || [];
        // console.log("navbars", that.navbars);
        that.id = response.data;
        // 完成请求后 第二次请求
        // 初始化第一页的数据
        var str = location.href;
        // console.log('urlStr',str)
        // var reg = /sign\/(.*)#/i
        // var res = str.search(reg)
        var start = str.search("sign/");
        var end = str.search("#");
        var start2 = parseInt(start + 5);
        var res = str.substring(start2, end);
        // var res2 = str.substring(start2, end);
        // console.log('res',res)
        http
          .post("Zmhf/index", {
            data: {
              sorttype: 1,
              length: 6,
              page: 1
            },
            key: "be15d4ca913c91494cb4f9cd6ce317c6",
            sign: res,
            type: "SelectCandidatesData"
          })
          .then(function(response) {
            that.entrys = response.data.candidates_info;
            // console.log('page1',that.entrys)
            that.id = response.data;
          })
          .catch(function(error) {
            // console.log("error", error);
          });
      })
      .catch(function(error) {
        // console.log("error", error);
      });


    // 监听页面到底部
//    	window.onscroll = function(){
//    		//变量scrollTop是滚动条滚动时，距离顶部的距离
//    		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//       // console.log('距离顶部的距离',scrollTop)
//    		//变量windowHeight是可视区的高度
//    		var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//       // console.log('可视区的高度',windowHeight)
//    		//变量scrollHeight是滚动条的总高度
//    		var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
//       // console.log('滚动条的总高度',scrollHeight)
//       //滚动条到底部的条件
//       if(scrollTop+windowHeight==scrollHeight){
//       that.loadMore = true
//       that.pageNum++
//       console.log('this.pageNum',that.pageNum)
//       console.log('this.AllPage',that.AllPage)
//       var str = location.href;
//       // console.log('urlStr',str)
//       // var reg = /sign\/(.*)#/i
//       // var res = str.search(reg)
//       var start = str.search("sign/");
//       var end = str.search("#");
//       var start2 = parseInt(start + 5);
//       var res = str.substring(start2, end);
//       // var res2 = str.substring(start2, end);
//       // console.log('res',res)
//      if (that.pageNumNew < that.AllPage) {
//         http
//           .post("Zmhf/index", {
//             data: {
//               sorttype: 1,
//               page: that.pageNum,
//               length: 2,
//             },
//             key: "be15d4ca913c91494cb4f9cd6ce317c6",
//             sign: res,
//             type: "SelectCandidatesData"
//           })
//           .then(function(response) {
//             // 如果没有报名则跳转
//             // if (response.is_sign == 0) {
//             //   that.$router.push({
//             //     path: '/sign'
//             //   });
//             // }
//             // console.log("response", response);
            
//               if (response.is_sign == 0) {
//                 that.showModul = true;
//               }
//               if (response.current_type == 2) {
//                 that.$router.push({
//                   path: "/personal"
//                 });
//               }
//               that.AllPage = response.data.page;
//               var Array1 = that.entrys;
//               // console.log('Array1',Array1)
//               var Array2 = response.data.candidates_info;
//               // console.log('Array2',Array2)
//               var ArrayAll = Array1.concat(Array2)
//               // console.log('ArrayAll',ArrayAll)
//               that.entrys = ArrayAll;
//               that.id = response.data;
//               that.loadMore = false;
//           })
//           .catch(function(error) {
//             // console.log("error", error);
//           });
//         }else{
//           that.NoMore = true;
//         }
//         //  console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
//       }
//     }
   

/*    // 初始化第一页的数据
    var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // var res2 = str.substring(start2, end);
    // console.log('res',res)
    http
      .post("Zmhf/index", {
        data: {
          sorttype: 1,
          length: 6,
          page: 1
        },
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "SelectCandidatesData"
      })
      .then(function(response) {
        that.entrys = response.data.candidates_info;
        console.log('page1',that.entrys)
        that.id = response.data;
      })
      .catch(function(error) {
        // console.log("error", error);
      });*/
  },
  components: { bottomBar },
  mounted () {
    // 添加监听事件
    window.addEventListener('scroll', this.handleScroll)
    window.addEventListener('scroll', this.ScrollTop)
  },
  methods: {
    share (){
      // window.location.href = 'http://wxtest.suoluomei.com/hpl/index.php?s=/weixin/invitation/share/tpl/beautify_share'
      // window.location.href = 'http://sucai.suoluomei.cn/sucai_zs/images/20181203/20cead97d09cdad709ea827d0b861cfe.jpg?x-oss-process=image/quality,Q_70'
      this.$router.push({
        path: '/share',
      });
    },
    handleScroll () {
      let that = this
      //变量scrollTop是滚动条滚动时，距离顶部的距离
   		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      // console.log('距离顶部的距离',scrollTop)
   		//变量windowHeight是可视区的高度
   		var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      // console.log('可视区的高度',windowHeight)
   		//变量scrollHeight是滚动条的总高度
   		var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
      // console.log('滚动条的总高度',scrollHeight)
      //滚动条到底部的条件
      if(scrollTop+windowHeight==scrollHeight){
        // 判断页面加载的页数
        // console.log('that.pageNumNew',that.pageNumNew)
        // console.log('that.AllPage',that.AllPage)
        if (that.pageNumNew < that.AllPage) {
          that.pageNumNew++
          that.loadMore = true
          // 动态加载
          var str = location.href;
          // console.log('urlStr',str)
          // var reg = /sign\/(.*)#/i
          // var res = str.search(reg)
          var start = str.search("sign/");
          var end = str.search("#");
          var start2 = parseInt(start + 5);
          var res = str.substring(start2, end);
          // var res2 = str.substring(start2, end);
          // console.log('res',res)
          http
            .post("Zmhf/index", {
              data: {
                sorttype: 1,
                length: 6,
                page: that.pageNumNew
              },
              key: "be15d4ca913c91494cb4f9cd6ce317c6",
              sign: res,
              type: "SelectCandidatesData"
            })
            .then(function(response) {
              that.AllPage = response.data.page;
              var Array1 = that.entrys;
              // console.log('Array1',Array1)
              var Array2 = response.data.candidates_info;
              // console.log('Array2',Array2)
              var ArrayAll = Array1.concat(Array2)
              // console.log('ArrayAll',ArrayAll)
              that.entrys = ArrayAll;
              that.id = response.data;
              that.loadMore = false
            })
            .catch(function(error) {
              // console.log("error", error);
            });
        }else{
          that.loadMore = false
          that.NoMore = true
        }
      }
    },
    ScrollTop () {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
   		var scrollTops = document.documentElement.scrollTop||document.body.scrollTop;
      var offsetTop = document.querySelector('#searchBar').offsetTop
      if(scrollTops>=offsetTop){
        this.fixedTop = true
      }else{
        this.fixedTop = false
      }
    },
    gzClick: function() {
      this.gz = true;
    },
    closeIcon: function() {
      this.gz = false;
      this.showModul = false;
    },
    // pm: function() {
    //   var str = location.href;
    //   // console.log('urlStr',str)
    //   // var reg = /sign\/(.*)#/i
    //   // var res = str.search(reg)
    //   var start = str.search("sign/");
    //   var end = str.search("#");
    //   var start2 = parseInt(start + 5);
    //   var res = str.substring(start2, end);
    //   // console.log('res',res)
    //   let that = this;
    //   http
    //     .post("Zmhf/index", {
    //       data: {
    //         sorttype: 2,
    //         page: 1
    //       },
    //       key: "be15d4ca913c91494cb4f9cd6ce317c6",
    //       sign: res,
    //       type: "SelectAllBeautifulGrain"
    //     })
    //     .then(function(response) {
    //       // console.log("pm-response", response);
    //       that.entry2s = response.data.candidates_info;
    //     })
    //     .catch(function(error) {
    //       // console.log("error", error);
    //     });
    // },
    zx: function() {
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            sorttype: 1,
            length: 6,
            page: 1
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectAllBeautifulGrain"
        })
        .then(function(response) {
          // console.log("pm-response", response);
          that.entrys = response.data.candidates_info;
        })
        .catch(function(error) {
          // console.log("error", error);
        });
    },
    whatchInput: function() {
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          data: {
            sorttype: 1,
            search: that.$refs.inputValue.value,
            page: 1
          },
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "SelectCandidatesData"
        })
        .then(function(response) {
            that.entrys = ''
            console.log('搜索',that.$refs.inputValue.value)
            if(response.errcode == 0){
              console.log("response", response);
              that.entrys = response.data.candidates_info;
              that.id = response.data;
              if(response.data.candidates_info==''){
                that.$weui.alert('暂无数据')
              }else{
                console.log('成功')
              }
            }
        })
        .catch(function(error) {
          // console.log("error", error);
        });
    },
    // 路由跳转
    LinkTo: function(link, index) {
      // console.log('event',event)
      // console.log('link', link);
      // console.log(link,index);
      // return false
      this.$router.push({
        path: link,
        query: {
          candidates_id: index
        }
      });
    },
    closeSimpleDialog() {
      this.openSimple = false;
    },
    // 下一页
    // rightPageNew: function() {
    //   this.isClickNew = false;
    //   if (this.pageNumNew < this.AllPage) {
    //     this.pageNumNew++;
    //     console.log("page", this.pageNumNew);
    //     var str = location.href;
    //     // console.log('urlStr',str)
    //     // var reg = /sign\/(.*)#/i
    //     // var res = str.search(reg)
    //     var start = str.search("sign/");
    //     var end = str.search("#");
    //     var start2 = parseInt(start + 5);
    //     var res = str.substring(start2, end);
    //     // console.log('res',res)
    //     let that = this;
    //     that.navbars = "";
    //     that.entrys = "";
    //     that.id = "";
    //     http
    //       .post("Zmhf/index", {
    //         data: {
    //           sorttype: 1,
    //           page: that.pageNumNew,
    //           length: 2
    //         },
    //         key: "be15d4ca913c91494cb4f9cd6ce317c6",
    //         sign: res,
    //         type: "SelectAllBeautifulGrain"
    //       })
    //       .then(function(response) {
    //         that.navbars = response.data;
    //         that.AllPage = response.data.page;
    //         console.log("rightPage", response);
    //         that.entrys = response.data.candidates_info || {};
    //       })
    //       .catch(function(error) {
    //         // console.log("error", error);
    //       });
    //   }
    // },
    // // 上一页
    // leftPageNew: function() {
    //   if (this.pageNumNew > 1) {
    //     this.pageNumNew--;
    //     this.isClickNew = true;
    //     console.log("page", this.pageNumNew);
    //     var str = location.href;
    //     // console.log('urlStr',str)
    //     // var reg = /sign\/(.*)#/i
    //     // var res = str.search(reg)
    //     var start = str.search("sign/");
    //     var end = str.search("#");
    //     var start2 = parseInt(start + 5);
    //     var res = str.substring(start2, end);
    //     // console.log('res',res)
    //     let that = this;
    //     that.navbars = "";
    //     that.entrys = "";
    //     that.id = "";
    //     http
    //       .post("Zmhf/index", {
    //         data: {
    //           sorttype: 1,
    //           page: that.pageNumNew,
    //           length: 2
    //         },
    //         key: "be15d4ca913c91494cb4f9cd6ce317c6",
    //         sign: res,
    //         type: "SelectAllBeautifulGrain"
    //       })
    //       .then(function(response) {
    //         that.navbars = response.data;
    //         that.entrys = response.data.candidates_info;
    //         console.log("leftPage", response);
    //       })
    //       .catch(function(error) {
    //         // console.log("error", error);
    //       });
    //   }
    // },
    // // 下一页
    // rightPage: function() {
    //   this.isClick = false;
    //   if (this.pageNum < this.AllPage) {
    //     this.pageNum++;
    //     var str = location.href;
    //     // console.log('urlStr',str)
    //     // var reg = /sign\/(.*)#/i
    //     // var res = str.search(reg)
    //     var start = str.search("sign/");
    //     var end = str.search("#");
    //     var start2 = parseInt(start + 5);
    //     var res = str.substring(start2, end);
    //     // console.log('res',res)
    //     let that = this;
    //     that.navbars = "";
    //     that.entrys = "";
    //     that.id = "";
    //     http
    //       .post("Zmhf/index", {
    //         data: {
    //           sorttype: 2,
    //           page: that.pageNum,
    //           length: 2
    //         },
    //         key: "be15d4ca913c91494cb4f9cd6ce317c6",
    //         sign: res,
    //         type: "SelectAllBeautifulGrain"
    //       })
    //       .then(function(response) {
    //         that.navbars = response.data;
    //         that.AllPage = response.data.page;
    //         console.log("page", that.pageNum);
    //         console.log("rightPage", response);
    //         that.entry2s = response.data.candidates_info;
    //       })
    //       .catch(function(error) {
    //         // console.log("error", error);
    //       });
    //   }
    // },
    // // 上一页
    // leftPage: function() {
    //   if (this.pageNum > 1) {
    //     this.pageNum--;
    //     this.isClick = true;
    //     console.log("page", this.pageNum);
    //     var str = location.href;
    //     // console.log('urlStr',str)
    //     // var reg = /sign\/(.*)#/i
    //     // var res = str.search(reg)
    //     var start = str.search("sign/");
    //     var end = str.search("#");
    //     var start2 = parseInt(start + 5);
    //     var res = str.substring(start2, end);
    //     // console.log('res',res)
    //     let that = this;
    //     that.navbars = "";
    //     that.entrys = "";
    //     that.id = "";
    //     http
    //       .post("Zmhf/index", {
    //         data: {
    //           sorttype: 2,
    //           page: that.pageNum,
    //           length: 2
    //         },
    //         key: "be15d4ca913c91494cb4f9cd6ce317c6",
    //         sign: res,
    //         type: "SelectAllBeautifulGrain"
    //       })
    //       .then(function(response) {
    //         that.navbars = response.data;
    //         console.log("leftPage", response);
    //         that.entry2s = response.data.candidates_info;
    //       })
    //       .catch(function(error) {
    //         // console.log("error", error);
    //       });
    //   }
    // }
  }
};
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 4rem;
  width: 100%;
  background-color: #f1f1f1;
  .load-more{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 2.5rem;
    background-color: #fff;
    .more-font{
      margin-left: 0.5rem;
      font-size: 1.1rem;
      color: #ec407a;
    }
  }
  .tc {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 5000;
    .tc-item {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      width: 15rem;
      height: 19rem;
      background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/tacket2-img.png?x-oss-process=image/quality,Q_70");
      background-size: cover;
      .close-icon {
        margin-right: 1rem;
        margin-top: 1rem;
        width: 1rem;
        height: 1rem;
      }
      .bq-icon {
        width: 100%;
        display: flex;
        justify-content: center;
        img {
          width: 12rem;
          height: 6rem;
        }
      }
      .tc-item-con {
        width: 100%;
        color: #fff;
        font-size: 1rem;
      }
      .tc-item-btn {
        width: 100%;
        color: #fff;
        font-size: 0.8rem;
        button {
          width: 5rem;
          height: 2rem;
          background-color: #fff;
          border: 0;
          border-radius: 0.5rem;
        }
      }
    }
  }
  .share {
    position: fixed;
    top: 3rem;
    right: 0;
    width: 4rem;
    height: 1.3rem;
    /*height: 3rem;*/
    z-index: 3000;
    /*background: #dbf9fa;*/
    /*border:  1px solid #fe80f2;*/
    /*border-radius: 10px 0 0 10px;*/
    background-image: url('../assets/share.png');
    background-size: 57px 20px;
    background-repeat: no-repeat;
    background-position: 0.5rem 0;
    color: #fe80f2;
  }
  .hdgz {
    position: fixed;
    top: 1rem;
    right: 0;
    width: 5.5rem;
    height: 1.3rem;
    z-index: 3000;
    img {
      object-fit: cover;
      width: 100%;
    }
  }
  .gz {
    background-image: url('http://sucai.suoluomei.cn/sucai_zs/images/rule-back.png?x-oss-process=image/quality,Q_70');
    background-size: 80vw 156vh;
    padding: 0.8rem;
    position: fixed;
    top: 5%;
    width: 80%;
    height: 80%;
    background-color: #fff;
    z-index: 4000;
    border: #e6e6e6 solid 1px;
    .close-icon {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 0.9rem;
      height: 0.9rem;
    }
    img {
      width: 100%;
      height: 95%;
    }
  }
  .djbm {
    position: absolute;
    top: 20rem;
    left: 7rem;
    width: 9.5rem;
    height: 4rem;
    z-index: 3000;
  }
  .banner {
    width: 100%;
    background-color: #fff;
    img {
      width: 100%;
    }
  }
  .searchBar{
    width: 100%;
    .fixedTopRight{
      position: fixed;
      top: 0;
      z-index: 5000;
      width: 100%;
      .navbar {
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 5rem;
        background-color: #fff;
        .navbar-item {
          width: 7rem;
          height: 4rem;
          &:nth-of-type(2) {
            background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/shu.png?x-oss-process=image/quality,Q_70");
            background-position: center;
            background-size: 7rem;
          }
          h2 {
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            font-size: 0.8rem;
            color: #777;
            font {
              color: #ff4e4e;
              font-size: 1.1rem;
            }
          }
          h4 {
            width: 100%;
            height: 2rem;
            text-align: center;
            font-size: 0.6rem;
            color: #777;
          }
        }
      }
      .search {
        padding-bottom: 1rem;
        width: 100%;
        background-color: #fff;
        .search-item {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 90%;
          height: 2.5rem;
          border-radius: 2.5rem;
          background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/bg_vote.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          input {
            width: 99.5%;
            height: 95%;
            border-radius: 2.5rem;
            border: 0;
            text-align: center;
            background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/search.png");
            background-repeat: no-repeat;
            background-position: 1rem;
            background-size: 1.2rem;
            outline: none;
          }
        }
      }
    }
    .fixedTopErro{
      width: 100%;
      .navbar {
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 5rem;
        background-color: #fff;
        .navbar-item {
          width: 7rem;
          height: 4rem;
          &:nth-of-type(2) {
            background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/shu.png?x-oss-process=image/quality,Q_70");
            background-position: center;
            background-size: 7rem;
          }
          h2 {
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            font-size: 0.8rem;
            color: #777;
            font {
              color: #ff4e4e;
              font-size: 1.1rem;
            }
          }
          h4 {
            width: 100%;
            height: 2rem;
            text-align: center;
            font-size: 0.6rem;
            color: #777;
          }
        }
      }
      .search {
        padding-bottom: 1rem;
        width: 100%;
        background-color: #fff;
        .search-item {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 90%;
          height: 2.5rem;
          border-radius: 2.5rem;
          background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/bg_vote.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          input {
            width: 99.5%;
            height: 95%;
            border-radius: 2.5rem;
            border: 0;
            text-align: center;
            background-image: url("http://hfc.suoluomei.com/hpl/Public/Beautiful/search.png");
            background-repeat: no-repeat;
            background-position: 1rem;
            background-size: 1.2rem;
            outline: none;
          }
        }
      }
    }
  }
  .content {
    padding-bottom: 1rem;
    margin-top: 1rem;
    width: 100%;
    background-color: #fff;
    .mu-tabs-inverse {
      background-color: #fff;
    }
    .demo-text {
      .demo-contant {
        width: 100%;
        .demo-loadmore-wrap {
          width: 100%;
          max-width: 360px;
          height: 420px;
          display: flex;
          flex-direction: column;
          .mu-appbar {
            width: 100%;
          }
        }
        .demo-loadmore-content {
          flex: 1;
          overflow: auto;
          -webkit-overflow-scrolling: touch;
        }
        .demo-contant-item {
          float: left;
          padding: 1rem;
          width: 50%;
          &:after {
            clear: both;
            content: "";
            height: 0;
            overflow: hidden;
            visibility: hidden;
          }
          img {
            width: 100%;
            height: 12rem;
            overflow: hidden;
            object-fit: cover;
          }
          .demo-item-title {
            display: inline-flex;
            width: 100%;
            .item-title-num {
              display: inline-flex;
              justify-content: center;
              align-items: center;
              width: 1.5rem;
              height: 1.5rem;
              line-height: 1.5rem;
              border-radius: 1.5rem;
              background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/bgImg.png?x-oss-process=image/quality,Q_70");
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
              font {
                display: block;
                width: 1.4rem;
                height: 1.4rem;
                border-radius: 1.4rem;
                background-color: #fff;
              }
            }
            .item-title-name {
              padding-left: 0.3rem;
              width: 4rem;
              height: 1.5rem;
              line-height: 1.5rem;
              font-size: 0.8rem;
              text-align: left;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            .item-title-ticket {
              width: 6rem;
              height: 1.5rem;
              line-height: 1.5rem;
              font-size: 0.8rem;
              text-align: center;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              font {
                font-size: 1rem;
                color: #ff4e4e;
              }
            }
          }
          .item-bottom-btn {
            margin-top: 0.5rem;
            width: 100%;
            button {
              padding: 0.2rem 0;
              width: 100%;
              border: 0;
              outline: none;
              color: #fff;
              background-color: #aaaaaa;
              border-radius: 0.3rem;
            }
            .item-bottom-btn-select {
              background-color: #ff0837;
            }
          }
        }
      }
    }
    .page {
      margin: 2rem 0;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 2rem;
      .page-left {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 1rem;
        height: 2rem;
        img {
          width: 100%;
        }
      }
      .page-num {
        width: 3rem;
        text-align: center;
      }
      .page-right {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 1rem;
        height: 2rem;
        img {
          width: 100%;
        }
      }
    }
  }
  .active {
    width: 100%;
    background-color: #fff;
    img {
      width: 100%;
      vertical-align: bottom;
    }
  }
  .division {
    .selectUnf {
      width: 3.3rem;
      height: 3.3rem;
    }
    position: absolute;
    /*background-image: url('http://sucai.suoluomei.cn/sucai_zs/images/jiao.png?x-oss-process=image/quality,Q_70');*/
    /*background-repeat: no-repeat;*/
    /*background-size: 20px 30px;*/
    /*width: 2rem;*/
    /*margin-top: 10px;*/
      /*width: 4rem;*/
      /*height: 4rem;*/
    >img {
      width: 100%;
      height: 100%;
    }
    p {
      margin-top: -2.6rem;
      margin-left: -0.8rem;
      font-size: 11px;
      transform:rotate(-45deg);
      color: #fff;
    }
    /*z-index:1;*/
  }
}
.index .content .demo-text .demo-contant .demo-contant-item .division img {
  width: 100%;
  height: 100%;
}
</style>
